<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/static/css/resources/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/stylesheets/login.css"/>
    <script type="text/javascript" src="/static/js/resources/jquery.min.js"></script>
    <script src="/static/js/resources/bootstrap.min.js"></script>
    <script src="/static/js/resources/bootstrapValidator.js"></script>
    <script type='text/javascript' src='/static/js/animation/jquery.particleground.min.js'></script>
    <script type='text/javascript' src='/static/js/animation/demo.js'></script>
</head>
<body>
<div class="container-box">
    <div class="header">
        <a href="/">
            <img src="/static/images/login/logo.png">
            <span class="logo-txt">SC Blog</span>
        </a>
    </div>
    <div class="content" id="particles">
        <div class="login-box">
            <span class="tit-text">账户登录</span>

            <form id="login-form" class="form-horizontal">
                <div class="input-box">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱" name="email"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" name="password"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <button id="login-btn" type="submit" class="btn btn-default login-btn">登录</button>
                        </div>
                    </div>
                </div>
            </form>

            <a href="register.html" class="register-link">
                <span class="register">免费注册</span>
            </a>
        </div>
    </div>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" th:include="pages/common/modal :: modal"></div>




    <div class="footer">
        <span>© 2016 SC Blog 版权所有</span>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function () {
        $('#login-form')
                .bootstrapValidator({
                    message: '这个值无效',
                    //live: 'submitted',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        email: {
                            validators: {
                                notEmpty: {
                                    message: '邮箱不能为空'
                                },
                                emailAddress: {
                                    message: '无效的邮箱格式'
                                }
                            }
                        },
                        password: {
                            validators: {
                                notEmpty: {
                                    message: '密码不能为空'
                                },
                                stringLength: {
                                    min: 5,
                                    max: 30,
                                    message: '密码长度大于5小于30'
                                }
                            }
                        }
                    }
                })
                .on('success.form.bv', function (e) {

                });
    });

</script>

<script type="text/javascript">
    var login_btn = $("#login-btn");
    var login_form = $("#login-form");

    login_btn.click(function (e){
        e.preventDefault();
        $.ajax({
            url: "/login",
            data: login_form.serializeArray(),
            type: 'POST',
            success: function(data){
                var result = $.parseJSON(data);
                if (result.isSuccess){
                    window.location = "/index";
                }
                myAlert(result.reason);
            }
        })
    })
</script>

</body>